<template>
    <div class="father">
        <h3>父组件</h3>
        <h4>{{ username }}</h4>
        <!-- v-model用在html标签上 -->
        <!-- <input type="text" v-model="username"> -->

        <!-- v-model的本质 -->
        <!-- <input type="text" :value="username" @input="(<HTMLInputElement>$event.target).value"> -->
        
        <!-- v-model用在组件标签上,本标签正常使用的前提时在NewInput.vue中配置，本质就像下方第二个输入框组件写法 -->
        1.<NewInput v-model="username"/>
        <!-- 在vue2中使用的时@input，在vue3中使用@update,:modelValue="username" => 指的时传过去的modelValue,@update:modelValue="username=$event => 相当于指定一个事件名叫做(update:modelValue) -->
        2.<NewInput :modelValue="username" @update:modelValue="username = $event"/>
        <Child/>
    </div>
</template>

<script setup lang="ts" name="Father">
import {ref} from 'vue'
import NewInput from './NewInput.vue'
// 数据
let username = ref('zhangsan')
</script>

<style scoped>
    .father{
        background-color: rgb(165, 164, 164);
        padding: 20px;
        border-radius: 10px;
    }
</style>